<template>
	<view>
		<!-- 功能列表 -->

		<u-cell-group :border="showBorder">
			<u-cell  v-if="avatarChange" :border="showBorder" class="cell" title="头像" :isLink="true">
				<view slot="value" class="u-slot-value" @click="changeAvatar()">
					<u-avatar :src="userinfo.avatar"></u-avatar>
				</view>
			</u-cell>
			<u-line></u-line>
			<u-cell  v-if="nickNameChange" :border="showBorder" class="cell" title="昵称"
				:url="'/pages/user/updateName?type=1&value='+userinfo.nickName" :value="userinfo.nickName"
				:isLink="true"></u-cell>
			<u-line></u-line>
			<u-cell  v-if="phoneChange" :border="showBorder" class="cell" title="手机号"
				:url="'/pages/user/updateName?type=4&value='+userinfo.phone" :value="userinfo.phone" :isLink="true">
			</u-cell>
			<u-line></u-line>
			<u-cell :border="showBorder" class="cell" title="二维码名片" url="/pages/user/qcode" :isLink="true">
				<view slot="value" class="u-slot-value">
					<u-image src="../../static/icon/qcode-black.png" width="18" height="18"></u-image>
				</view>
			</u-cell>
			<u-line></u-line>
			<u-cell :border="showBorder" class="cell" title="更多信息" url="/pages/user/more" :isLink="true"></u-cell>
			<u-line></u-line>

            <view style="height: 20rpx;"></view>
			<u-cell v-if="userinfo.inviteCode" :border="showBorder" class="cell" title="邀请码"
				 style="padding-right: 20px;" :isLink="!userinfo.inviteCode"
				:value="userinfo.inviteCode">
			</u-cell>
			<u-cell v-if="!userinfo.inviteCode" :border="showBorder" class="cell" title="邀请码"
				:url="'/pages/user/updateName?type=7&value='+userinfo.inviteCode"  :isLink="true"
				:value="userinfo.inviteCode">
			</u-cell>
			<u-line></u-line>
			<u-cell :border="showBorder" class="cell" style="padding-right: 20px;" title="我的推广码"
				:value="userinfo.promoCode">
			</u-cell>
			<u-line></u-line>
		</u-cell-group>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				showBorder: false,
				nickNameChange: true,
				avatarChange: true,
				headerChange: true,
				phoneChange: true,
				userinfo: {}
			};
		},
		created() {
			this.userinfo = uni.getStorageSync('user')
		},
		onShow() {
			let avatarChange = getApp().globalData.avatarChange
			if (avatarChange) {
				getApp().globalData.avatarChange = false;
				this.show = false
				setTimeout(() => {
					this.userinfo = uni.getStorageSync('user')
					this.avatarChange = true
				}, 100)
			}
			let inviteChange = getApp().globalData.inviteChange
			if (inviteChange) {
				getApp().globalData.inviteChange = false;
				this.show = false
				setTimeout(() => {
					this.userinfo = uni.getStorageSync('user')
					this.inviteChange = true
				}, 100)
			}
			let nickNameChange = getApp().globalData.nickNameChange
			if (nickNameChange) {
				getApp().globalData.nickNameChange = false;
				this.show = false
				setTimeout(() => {
					this.userinfo = uni.getStorageSync('user')
					this.nickNameChange = true
				}, 100)
			}
			let phoneChange = getApp().globalData.phoneChange
			if (phoneChange) {
				getApp().globalData.phoneChange = false;
				this.show = false
				setTimeout(() => {
					this.userinfo = uni.getStorageSync('user')
					this.phoneChange = true
				}, 100)
			}
		},
		methods: {
			gotoLogin() {
				if (!this.user.id) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			},
			changeAvatar() {
				var that = this
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						const src = res.tempFilePaths[0];

						uni.redirectTo({
							url: '/pages/user/uploadAvatar?src=' + src
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #e7e7e7,

	}

	.u-collapse-item,
	.cell {
		padding: 5px 0px 5px 20px;
		background-color: #FFFFFF;
	}

	.header {
		&.status {
			padding-top: var(--status-bar-height);
		}

		background-color: #ff6364;
		width: 92%;
		height: 30vw;
		padding: 0 4%;
		display: flex;
		align-items: center;

		.userinfo {
			width: 90%;
			display: flex;

			.face {
				flex-shrink: 0;
				width: 15vw;
				height: 15vw;

				image {
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}

			.info {
				display: flex;
				flex-flow: wrap;
				padding-left: 30upx;

				.username {
					width: 100%;
					color: #fff;
					font-size: 40upx;
				}
			}
		}

		.setting {
			flex-shrink: 0;
			width: 6vw;
			height: 6vw;
		}
	}
</style>
